<!--<template>-->
<!--  <el-row>-->
<!--    <el-col :span="8" style="padding-right: 10px">-->
<!--      <el-card class="box-card">-->
<!--        <div class="user">-->
<!--          <img src="../assets/images/logos.png" alt="方方" />-->
<!--          <div class="userinfo">-->
<!--            <p class="name">方方</p>-->
<!--            <p class="access">网站管理员</p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="login-info">-->
<!--          <p>上次登录时间：<span>2022-11-3</span></p>-->
<!--          <p>上次登录地点：<span>杭州</span></p>-->
<!--        </div>-->
<!--      </el-card>-->
<!--      <el-card style="margin-top: 20px; height: 477px">-->
<!--        <el-table :data="tableData" style="width: 100%">-->
<!--          &lt;!&ndash; <el-table-column prop="name" label="品牌" width="auto">-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="todayBuy" label="今日销量" width="auto">-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="monthBuy" label="月销量" width="auto">-->
<!--          </el-table-column> &ndash;&gt;-->
<!--          <el-table-column-->
<!--            v-for="(val, key) in tablelabel"-->
<!--            :prop="key"-->
<!--            :label="val"-->
<!--            width="auto"-->
<!--          >-->
<!--          </el-table-column>-->
<!--          &lt;!&ndash; 使用v-for遍历代替了elementUI原有的数据接口 &ndash;&gt;-->
<!--        </el-table>-->
<!--      </el-card>-->
<!--    </el-col>-->
<!--    <el-col :span="16" style="padding-left: 10px">-->
<!--      <div class="num">-->
<!--        <el-card-->
<!--          v-for="item in CountData"-->
<!--          :key="item.name"-->
<!--          :body-style="{ display: 'flex', padding: 0 }"-->
<!--        >-->
<!--          <i-->
<!--            class="icon"-->
<!--            :class="`el-icon-${item.icon}`"-->
<!--            :style="`background-color:${item.color};`"-->
<!--          ></i>-->
<!--          <div class="detail">-->
<!--            <p class="price">{{ item.value }}</p>-->
<!--            <p class="desc">{{ item.name }}</p>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </div>-->
<!--      <el-card style="height: 280px">-->
<!--        <div ref="echarts1" style="height: 280px"></div>-->
<!--        &lt;!&ndash; //ref 方便dom操作 &ndash;&gt;-->
<!--      </el-card>-->
<!--      <div class="grah">-->
<!--        <el-card style="height: 260px">-->
<!--          <div ref="echarts2" style="height: 260px"></div>-->
<!--        </el-card>-->
<!--        <el-card style="height: 260px">-->
<!--          <div ref="echarts3" style="height: 260px"></div>-->
<!--        </el-card>-->
<!--      </div>-->
<!--    </el-col>-->
<!--  </el-row>-->
<!--</template>-->
<!--<script>-->
<!--import * as echarts from "echarts";-->
<!--import { getData } from "../api";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      tableData: [],-->
<!--      tablelabel: {-->
<!--        name: "品牌",-->
<!--        todayBuy: "今日销量",-->
<!--        monthBuy: "月销量",-->
<!--        totalBuy: "总销量",-->
<!--      },-->
<!--      CountData: [-->
<!--        {-->
<!--          name: "今日支付订单",-->
<!--          value: 12,-->
<!--          icon: "success",-->
<!--          color: "#2ec7c9",-->
<!--        },-->
<!--        {-->
<!--          name: "今日收藏订单",-->
<!--          value: 210,-->
<!--          icon: "star-on",-->
<!--          color: "#ffb980",-->
<!--        },-->
<!--        {-->
<!--          name: "今日未支付订单",-->
<!--          value: 83,-->
<!--          icon: "s-goods",-->
<!--          color: "#5ab1ef",-->
<!--        },-->
<!--        {-->
<!--          name: "本月支付订单",-->
<!--          value: 20,-->
<!--          icon: "success",-->
<!--          color: "#2ec7c9",-->
<!--        },-->
<!--        {-->
<!--          name: "本月收藏订单",-->
<!--          value: 11,-->
<!--          icon: "star-on",-->
<!--          color: "#ffb980",-->
<!--        },-->
<!--        {-->
<!--          name: "本月未支付订单",-->
<!--          value: 2,-->
<!--          icon: "s-goods",-->
<!--          color: "#5ab1ef",-->
<!--        },-->
<!--      ],-->
<!--    };-->
<!--  },-->
<!--  mounted() {-->
<!--    getData().then(({ data }) => {-->
<!--      const { tableData } = data.data;-->
<!--      this.tableData = tableData;-->

<!--      const echarts1 = echarts.init(this.$refs.echarts1); //echars.init()-->
<!--      //数表格式组装-->
<!--      var echarts1option = {};-->
<!--      const { orderData, userData, videoData } = data.data;-->
<!--      const xAxis = Object.keys(orderData.data[0]); //根据结构 解构拆分出所需数据-->
<!--      echarts1option.xAxis = {-->
<!--        data: Object.values(orderData.date),-->
<!--      };-->
<!--      echarts1option.yAxis = {};-->
<!--      echarts1option.legend = {-->
<!--        data: xAxis,-->
<!--      };-->
<!--      echarts1option.series = [];-->
<!--      xAxis.forEach((key) => {-->
<!--        echarts1option.series.push({-->
<!--          //按照echars格式需要，组装series的数据-->
<!--          name: key,-->
<!--          data: orderData.data.map((item) => item[key]),-->
<!--          type: "line",-->
<!--        });-->
<!--      });-->
<!--      console.log(echarts1option);-->
<!--      echarts1.setOption(echarts1option);-->
<!--      //组建柱状图-->
<!--      const echarts2 = echarts.init(this.$refs.echarts2);-->
<!--      const echarts2option = {-->
<!--        legend: {-->
<!--          // 图例文字颜色-->
<!--          textStyle: {-->
<!--            color: "#333",-->
<!--          },-->
<!--        },-->
<!--        grid: {-->
<!--          left: "20%",-->
<!--        },-->
<!--        // 提示框-->
<!--        tooltip: {-->
<!--          trigger: "axis",-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: "category", // 类目轴-->
<!--          data: userData.map((item) => item.date),-->
<!--          axisLine: {-->
<!--            lineStyle: {-->
<!--              color: "#17b3a3",-->
<!--            },-->
<!--          },-->
<!--          axisLabel: {-->
<!--            interval: 0,-->
<!--            color: "#333",-->
<!--          },-->
<!--        },-->
<!--        yAxis: [-->
<!--          {-->
<!--            type: "value",-->
<!--            axisLine: {-->
<!--              lineStyle: {-->
<!--                color: "#17b3a3",-->
<!--              },-->
<!--            },-->
<!--          },-->
<!--        ],-->
<!--        color: ["#2ec7c9", "#b6a2de"],-->
<!--        series: [-->
<!--          {-->
<!--            name: "new user",-->
<!--            data: userData.map((item) => item.new),-->
<!--            type: "bar",-->
<!--          },-->
<!--          {-->
<!--            name: "active user",-->
<!--            data: userData.map((item) => item.active),-->
<!--            type: "bar",-->
<!--          },-->
<!--        ],-->
<!--      };-->
<!--      echarts2.setOption(echarts2option);-->
<!--      //组建饼状图结构-->
<!--      const echarts3 = echarts.init(this.$refs.echarts3);-->
<!--      const echarts3option = {-->
<!--        tooltip: {-->
<!--          trigger: "item",-->
<!--        },-->
<!--        color: [-->
<!--          "#0f78f4",-->
<!--          "#dd536b",-->
<!--          "#9462e5",-->
<!--          "#a6a6a6",-->
<!--          "#e1bb22",-->
<!--          "#39c362",-->
<!--          "#3ed1cf",-->
<!--        ],-->
<!--        series: [{ data: videoData, type: "pie" }],-->
<!--      };-->
<!--      echarts3.setOption(echarts3option);-->
<!--    });-->
<!--  },-->
<!--};-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--.user {-->
<!--  margin-bottom: 20px;-->
<!--  padding-bottom: 20px;-->
<!--  border-bottom: 1px solid #ccc;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  padding-bottom: 20px;-->

<!--  img {-->
<!--    margin-right: 40px;-->
<!--    width: 130px;-->
<!--    height: 130px;-->
<!--    border-radius: 50%;-->
<!--  }-->
<!--}-->

<!--.userinfo {-->
<!--  .name {-->
<!--    font-size: 32px;-->
<!--    margin-bottom: 10px;-->
<!--  }-->

<!--  .access {-->
<!--    color: #999;-->
<!--    padding-left: 1px;-->
<!--  }-->
<!--}-->

<!--.login-info {-->
<!--  p {-->
<!--    line-height: 28px;-->
<!--    font-size: 14px;-->
<!--    color: #999;-->

<!--    span {-->
<!--      color: #666;-->
<!--      margin-left: 60px;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.num {-->
<!--  display: flex;-->
<!--  flex-wrap: wrap;-->
<!--  justify-content: space-between;-->

<!--  .icon {-->
<!--    width: 80px;-->
<!--    height: 80px;-->
<!--    font-size: 30px;-->
<!--    color: white;-->
<!--    text-align: center;-->
<!--    line-height: 80px;-->
<!--  }-->

<!--  .detail {-->
<!--    margin-left: 15px;-->
<!--    display: flex;-->
<!--    flex-direction: column;-->
<!--    justify-content: center;-->

<!--    .price {-->
<!--      font-size: 30px;-->
<!--      margin-bottom: 10px;-->
<!--      line-height: 30px;-->
<!--      height: 30px;-->
<!--    }-->

<!--    .desc {-->
<!--      font-size: 14px;-->
<!--      color: #999;-->
<!--      text-align: center;-->
<!--    }-->
<!--  }-->

<!--  .el-card {-->
<!--    width: 32%;-->
<!--    margin-bottom: 20px;-->
<!--  }-->
<!--}-->

<!--.grah {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->

<!--  .el-card {-->
<!--    width: 48%;-->
<!--    margin-top: 20px;-->
<!--  }-->
<!--}-->

<!--.under-card {-->
<!--  height: 600px;-->
<!--}-->
<!--</style>-->
